<template>
	<vCommonPage type="1" :typeChose="$route.query.typeChose" :title="$route.query.code == 'mzyy' ? '门诊预约':'门诊挂号'"
		:mzlx="$route.query.mzlx">
		<div slot="customContent" style="width: 100%;height: 100%;">
			<div class="CenterBox">
				<div class="left flex" style="margin-top: 1.5375rem;align-items: center;">
					<div class="doctorType">{{$store.state.appointment.doctor.doctorName}}</div>
					<div class="doctorName">{{$store.state.appointment.doctor.regTypeId}}</div>
					<div class="doctorName">{{$store.state.appointment.doctor.doctorTypeName}}</div>
					<div class="doctorNeedMoney">挂号费：¥{{$store.state.appointment.doctor.fee}}</div>
				</div>
				<div class="left flex" style="margin-top: 1.5375rem;">
					<div class="patientName">患者：{{$store.state.user.userinfo.patientName}}</div>
				</div>
			</div>
			<div class="contentBox" v-loading.fullscreen.lock="fullscreenLoading">
				<div v-for="(item,index) in timeList.slice((currentPage-1)*pagesize,currentPage*pagesize)"
					:key="'info1-'+index" @click="clickItem(index,item)"
					:class="item.amount == 0?'contentBoxItemNone':'contentBoxItem' ">
					<div style="display: flex; align-items: center;">{{item.interval}}</div>
					<div class="contentBoxItemGreen">余号：{{item.amount}}</div>
				</div>
			</div>





			<!-- <div class="timeName" v-show="isHaslMorning">上午</div> -->
			<!-- 早上 -->
			<!-- 			<div class="contentBox" v-loading.fullscreen.lock="fullscreenLoading">
				<div v-for="(item,index) in timeList.slice((currentPage-1)*pagesize,currentPage*pagesize)"
					v-if="item.isMorning" :key="'info1-'+index" @click="clickItem(index,item)"
					:class="item.amount == 0?'contentBoxItemNone':'contentBoxItem' ">
					{{item.regTime}}
				</div>
			</div> -->
			<!-- <div class="emptyBox" v-show="isHaslMorning"></div> -->
			<!-- 下午 -->
			<!-- 			<div class="timeName" v-show="isHasNight">下午</div>
			<div class="contentBox" v-loading.fullscreen.lock="fullscreenLoading">
				<div v-for="(item,index) in timeList.slice((currentPage-1)*pagesize,currentPage*pagesize)"
					v-if="!item.isMorning" :key="'info1-'+index" @click="clickItem(index,item)"
					:class="item.amount == 0?'contentBoxItemNone':'contentBoxItem' ">
					{{item.regTime}}
				</div>
			</div> -->
			<vTip v-if="tipText" :tipText="tipText"></vTip>
			<div v-if="tipText" class="yiny" @click="closeYinying()"></div>
			<div class="bottomBox">
				<el-button type="primary" class="BtnTextHome" @click="goBack()">返回</el-button>
				<el-button type="primary" class="BtnTextHome" @click="goBackHome()">首页</el-button>
				<el-button type="primary" v-show="totalPage>1"
					:class="totalPage == 1 ? 'huiBottom upPage':'blueBottom upPage'" @click="prePage()">
					上一页
				</el-button>
				<div class="pageBox" v-show="totalPage>1">
					<div class="curentPage">{{currentPage}}</div>
					/
					<div class="totalPage">{{totalPage}}</div>
				</div>
				<el-button type="primary" v-show="totalPage>1"
					:class="totalPage == 1 ? 'huiBottom downPage':'blueBottom downPage'" @click="nextPage()">
					下一页
				</el-button>
			</div>
		</div>
	</vCommonPage>
</template>
<script>
	import {
		registerSource
	} from "@api/apiBox/mzyyAndMzgh"
	export default {
		name: "mzgh",
		data() {
			return {
				choseList: [{
					name: '耳鼻眼科门诊',
					isClick: false
				}],
				//是否点击普通门诊
				clickOrdinary: true,
				timeList: [],
				fullscreenLoading: false,
				currentPage: 1, //初始页
				pagesize: 10, //    每页的数据
				totalPage: 0,
				tipText: '',
				timeOut: '',
				isHasNight: false,
				isHaslMorning: false
			};
		},
		methods: {
			ReckonTime() {},
			clickItem(index, item) {
				if (item.amount == 0) {
					this.tipText = "该医生此时间段已经约满，请选择其他时间段！";
					this.timeOut = setTimeout(() => {
						this.tipText = "";
						clearTimeout(this.timeOut);
					}, 2000)
				} else {
					this.clearClick();
					this.timeList[index].isClick = true;
					item.regFee = item.fee;
					this.$store.dispatch("appointment/updateRegInfo", item); // 科室信息
					this.$store.dispatch("appointment/updateDoctor", item); // 医生信息
					this.openFullScreen();
				}
			},
			closeYinying() {
				this.tipText = "";
				clearTimeout(this.timeOut);
			},
			clearClick() {
				let list = this.timeList;
				for (let item of list) {
					item.isClick = false;
				}
				this.timeList = list;
			},
			openFullScreen() {
				let mzlx = this.$route.query.mzlx;
				if (mzlx == 4) {
					this.$router.push({
						name: "mzyyQrghxx",
						query: {
							code: this.$route.query.code,
							mzlx: mzlx,
							typeChose: '4'
						},
					})
				}
				if (mzlx == 3) {
					this.$router.push({
						name: "mzyyQrghxx",
						query: {
							code: this.$route.query.code,
							mzlx: mzlx,
							typeChose: '5'
						},
					})
				}

				if (mzlx == 0) {
					this.$router.push({
						name: "mzyyQrghxx",
						query: {
							code: this.$route.query.code,
							mzlx: mzlx,
							typeChose: '4'
						},
					})
				}
			},
			async initData() {
				let data = {
					data: {
						deptId: this.$store.state.appointment.department.deptId, //科室ID
						doctorId: this.$store.state.appointment.doctor.doctorId, //医生ID
						beginDate: this.$store.state.appointment.date //格式 yyyy-MM-dd
					},
					that: this
				};
				//获取医生排班信息
				let res = await registerSource(data);
				let list = res.data;
				this.timeList = this.addCLick(list);
				// this.timeList.sort(this.compare('regTime'))
				// //判断数据这一页 是否都是上午排班
				// this.calIsMorningAndNight();
				this.totalPage = parseInt((this.timeList.length + this.pagesize - 1) / this.pagesize)
				//updategetRegInfo
			},
			calIsMorningAndNight() {
				this.calIsHasMorning();
				this.calIsHasNight();
			},
			calIsHasMorning() {
				this.isHaslMorning = false;
				let timeListLength = this.timeList.length;
				let searchList = 0;
				if (timeListLength < this.currentPage * this.pagesize) {
					searchList = timeListLength;
				} else {
					searchList = this.currentPage * this.pagesize;
				}
				for (let i = (this.currentPage - 1) * this.pagesize; i < searchList; i++) {
					if (this.timeList[i].isMorning) {
						this.isHaslMorning = true;
						return;
					}
				}
			},
			calIsHasNight() {
				this.isHasNight = false;
				let timeListLength = this.timeList.length;
				let searchList = 0;
				if (timeListLength < this.currentPage * this.pagesize) {
					searchList = timeListLength;
				} else {
					searchList = this.currentPage * this.pagesize;
				}
				for (let i = (this.currentPage - 1) * this.pagesize; i < searchList; i++) {
					if (!this.timeList[i].isMorning) {
						this.isHasNight = true;
						return;
					}
				}
			},
			//给数组添加点击属性
			addCLick(list) {
				for (let i of list) {
					i['isClick'] = false;
					if (i.regTime.split('-')[0] >= '14:00') {
						i['isMorning'] = false;
					} else {
						i['isMorning'] = true;
					}
				}
				return list;
			},
			prePage() {
				if (this.currentPage > 1) {
					this.currentPage--;
				}
				this.calIsMorningAndNight();
			},
			nextPage() {
				if (this.currentPage < this.totalPage) {
					this.currentPage++;
				}
				this.calIsMorningAndNight();
			},
			compare(property) {
				return function(a, b) {
					var value1 = a[property];
					var value2 = b[property];
					return value1 > value2 ? 1 : -1;
				}
			}
		},
		computed: {
			timeItemClassObj: function(item) {
				return {
					"": this.operationalMatters.length <= 6,
					"": this.operationalMatters.length >= 7 && this.operationalMatters.length < 9,
					"": this.operationalMatters.length >= 9
				}
			},
		},
		components: {},
		mounted() {},
		created() {
			this.initData();
		}
	};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
	@import "../../assets/css/mzghYy/xzsj.scss";

	.contentBoxItemGreen {
		font-size: 2.5vw;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #46C349;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		margin-left: 1.8625rem;
	}
</style>
